<template>
	<!-- 邀请新人 -->
	<view class="invit">
		<view class="back">
			<image :src="imagesUrl('poster.png')" mode="aspectFill" />
		</view>
		<view class="ad">
			<image :src="imageUrl('other-ad.png')" mode="aspectFill" />
		</view>
		<view class="rules">
			规则
		</view>
		<!-- 邀请步骤 -->
		<view class="step">
			<view class="title">
				邀请步骤
			</view>
			<view class="instructions">
				<view class="arrow_lef">
					>>
				</view>
				<view class="arrow_mid">
					>>
				</view>
				<view class="arrow_rig">
					>>
				</view>
				<view class="content" v-for="(item,index) in steps" :key="index">

					<view class="top">
						<image :src="item.src" mode="aspectFill" />
					</view>
					<view class="bottom">
						{{item.word}}
					</view>

				</view>
			</view>
		</view>
		<!-- 我的收益 -->
		<view class="step invite">
			<view class="title">
				我的收益
			</view>
			<view class="mycomein">
				<view class="comein" v-for="item in income">
					<view class="top">
						{{item.totalin}}
					</view>
					<view class="bottom">
						{{item.word}}
					</view>

				</view>
			</view>
		</view>
		<!-- 邀请记录 -->
		<view class="step invited">
			<view class="title">
				邀请记录
			</view>
			<view class="records">
				<scroll-view scroll-y="true" class="scroll-view-height records">
					<view class="record" v-for="item in records">
						<view class="lef">
							<image :src="item.image" mode="aspectFill" />
							<view class="info">
								<view class="name">
									{{item.user}}
								</view>
								<view class="time">
									<text class="year">{{item.year}}</text> <text>{{item.time}}</text>
								</view>
							</view>
						</view>
						<view class="rig">
							{{item.money}}
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view class="Bottombtn">
			<view class="btnback">
				<navigator url="/pages/other/inviteNew" class="btn">
					分享二维码
				</navigator>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				words: ['1、每日最多可提现5次', '2、单次提现最低金额为10元'],
				steps: [{
					src: this.imageUrl('share.png'),
					word: '分享二维码'
				}, {
					src: this.imageUrl('newuser.png'),
					word: '新用户扫码注册'
				}, {
					src: this.imageUrl('createorder.png'),
					word: '新用户下单'
				}, {
					src: this.imageUrl('money.png'),
					word: '佣金到账'
				}, ],
				income: [{
					totalin: '￥92.36',
					word: '累计现金收益'

				}, {
					totalin: 88.36,
					word: '累计爆点收益'
				}, {
					totalin: 20,
					word: '邀请好友数'
				}, ],
				records: [{
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, {
					image: this.imagesUrl('photo.png'),
					money: '+399元',
					year: '2025/01/29',
					time: '18:02:18',
					user: '用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称',

				}, ]
			}
		},
		methods: {

		},
		components: {

		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #d72b23;
	}

	// 优惠券盒子
	.invit {
		height: 200vh;
		background: #d72b23;
		position: relative;
		width: 100vw;

		.back {
			width: 100%;
			overflow: hidden;
			height: 1200rpx;
			position: relative;

			image {
				position: absolute;
				top: -360rpx;
				width: 100vw;
				height: 100vh;
			}
		}

		.rules {
			width: 98rpx;
			height: 48rpx;
			background-color: #fff;
			position: absolute;
			top: 96rpx;
			right: 0;
			border-bottom-left-radius: 24rpx;
			border-top-left-radius: 24rpx;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 48rpx;
			letter-spacing: 0.64px;
			color: #333333;
			padding-left: 18rpx;
		}

		.ad {
			position: absolute;
			top: 62rpx;
			left: 196rpx;
			width: 400rpx;
			height: 148rpx;

			image {
				width: 400rpx;
				height: 148rpx;
			}
		}

		// 邀请框公共样式
		.step {
			position: relative;
			top: -380rpx;
			display: flex;
			flex-direction: column;
			width: 666rpx;
			height: 316rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			background: #fff;
			box-shadow: 0 0 0 12rpx rgba(255, 255, 255, 0.7);

			.title {
				height: 72rpx;
				margin: 0 auto;
				width: 220rpx;
				color: #fff;
				background-color: #ff7803;
				text-align: center;
				line-height: 72rpx;
				font-size: 28rpx;
				font-weight: 1000;
				// border-bottom-left-radius: 24rpx;
				border-radius: 0px 0px 16rpx 16rpx;
				position: absolute;
				top: -27rpx;
				left: 224rpx;
			}

			.title::before {
				position: absolute;
				top: 0;
				left: -14rpx;
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				border-color: #c25d05 transparent;
				border-width: 0rpx 0px 26rpx 14rpx;
				border-style: solid;

			}

			.title::after {
				position: absolute;
				top: 0;
				right: -14rpx;
				display: inline-block;
				content: '';
				width: 0;
				height: 0;
				border-color: #c25d05 transparent;
				border-width: 0 14rpx 26rpx 0;
				border-style: solid;

			}

			.instructions {
				width: 594rpx;
				height: 152rpx;

				left: 36rpx;
				position: absolute;
				bottom: 54rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.arrow_lef {
					color: #FF7803;
					position: absolute;
					left: 118rpx;
					top: 28rpx;
				}

				.arrow_mid {
					color: #FF7803;
					position: absolute;
					left: 275rpx;
					top: 28rpx;
				}

				.arrow_rig {
					color: #FF7803;
					position: absolute;
					right: 115rpx;
					top: 28rpx;
				}

				.content {
					width: 120rpx;
					height: 126rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.top {
						width: 72rpx;
						height: 72rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}

					.bottom {
						margin-top: 16rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: normal;
						line-height: 32rpx;
					}
				}
			}

			.mycomein {
				height: 100%;
				display: flex;

				.comein {
					width: 222rpx;
					height: 296rpx;

					.top {
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						letter-spacing: 0.64rpx;
						font-family: D-DIN;
						font-size: 48rpx;
						font-weight: bold;
						color: #333333;
						margin-top: 108rpx;
					}

					.bottom {
						margin-top: 30rpx;
						text-align: center;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: normal;
						line-height: 28rpx;
						letter-spacing: 0.64rpx;
						color: #999999;
					}
				}
			}

			.records {
				margin-top: 32rpx;

				.record {
					width: 666rpx;
					height: 130rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.lef {
						width: 368rpx;
						height: 100%;
						display: flex;
						justify-content: left;
						align-items: center;

						image {
							margin-left: 30rpx;
							width: 64rpx;
							height: 64rpx;
						}

						.info {
							width: 244rpx;
							margin-left: 30rpx;

							.name {
								width: 230rpx;
								font-size: 26rpx;
								font-weight: 500;
								line-height: 28rpx;

								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.time {
								margin-top: 12rpx;
								width: 244rpx;
								height: 24rpx;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 24rpx;
								color: #999999;

								.year {
									margin-right: 12rpx;
								}
							}


						}
					}

					.rig {
						color: #FF7803;
						margin-right: 32rpx;
					}
				}

			}
		}

		.invite {
			margin-top: 90rpx;
			height: 296rpx;
		}

		.invited {
			height: auto;
			margin-top: 90rpx;
			min-height: 514rpx;
			max-height: 1428rpx;
		}

		// 滚动列表样式
		.scroll-view-height {
			/* 页面高度减去包含状态栏、标题、tab组件的高度 */
			// height: calc(100vh - var(--status-bar-height) - 178rpx);
			height: 800rpx;
		}

		.list-item {
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			background-color: #FFFFFF;
		}

		.Bottombtn {
			position: fixed;
			bottom: 0;
			background-color: #ffffff;

			.btnback {
				width: 750rpx;
				height: 163rpx;
				background-color: #d72b23;
				padding-top: 16rpx;
				box-sizing: border-box;

				.btn {
					margin: 0 auto;
					color: #fff;
					font-weight: 500;
					text-align: center;
					line-height: 88rpx;
					width: 690rpx;
					height: 88rpx;
					border-radius: 44rpx;
					background: #FF7803;
				}
			}
		}
	}
</style>